<!--
//
// PermissionTree.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/13.
//
-->
<template>
    <div class="PermissionTree">
        <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="list" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" height="580px" round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
            <vxe-column align="right" field="status" title="授权状态" width="100">
                <template #default="{ row }">
                    <template v-if="row.type === 0 || row.type === 1">
                        <el-tag v-if="getSelectStatus(row) === 'all'" effect="dark" type="success">全部授权</el-tag>
                        <el-tag v-if="getSelectStatus(row) === 'half'" effect="dark" type="warning">部分授权</el-tag>
                    </template>
                </template>
            </vxe-column>
            <vxe-column align="left" field="Name" min-width="200" title="菜单权限" treeNode>
                <template #default="{row}">
                    <template v-if="row.type === 0">
                        <div class="custom-node">
                            <el-checkbox v-model="row.hasPerm" @change="(val) => onCheckboxChange(val, row)"></el-checkbox>
                            <span class="directory tag">目录</span>
                            <span class="label">{{ row.name }}</span>
                        </div>
                    </template>
                    <template v-if="row.type === 1">
                        <div class="custom-node">
                            <el-checkbox v-model="row.hasPerm" @change="(val) => onCheckboxChange(val, row)"></el-checkbox>
                            <span class="page tag">页面</span>
                            <span class="label">{{ row.name }}</span>
                        </div>
                    </template>
                    <template v-if="row.type === 2">
                        <div class="custom-node">
                            <el-checkbox v-model="row.hasPerm" @change="(val) => onCheckboxChange(val, row)"></el-checkbox>
                            <span class="label perm tag">{{ row.name }}</span>
                        </div>
                    </template>
                </template>
            </vxe-column>

<!--            <vxe-column align="right" field="Data" min-width="250" title="数据权限">-->
<!--                <template #default="{row}">-->
<!--                    <template v-if="row.isLockDataPermission === 0">-->
<!--                        <el-radio-group v-if="row.type === 1 && row.hasPerm" v-model="row.dataScopeType" size="small" @change="(v) => dataScopeChange(v, row)" @click.stop>-->
<!--                            <el-radio-button :value="0"><span class="radio-label">全部</span></el-radio-button>-->
<!--                            <el-radio-button :value="1"><span class="radio-label">组织(包含子组织)</span></el-radio-button>-->
<!--                            <el-radio-button :value="2"><span class="radio-label">组织(当前)</span></el-radio-button>-->
<!--                            <el-radio-button :value="3"><span class="radio-label">个人</span></el-radio-button>-->
<!--                        </el-radio-group>-->
<!--                    </template>-->
<!--                    <template v-if="row.isLockDataPermission === 1">-->
<!--                        <el-tag type="danger">数据权限已锁定为-->
<!--                            <span v-if="row.dataScopeType === 0">全部</span>-->
<!--                            <span v-if="row.dataScopeType === 1">组织(包含子组织)</span>-->
<!--                            <span v-if="row.dataScopeType === 2">组织(当前)</span>-->
<!--                            <span v-if="row.dataScopeType === 3">个人</span>-->
<!--                        </el-tag>-->
<!--                    </template>-->
<!--                </template>-->
<!--            </vxe-column>-->
        </vxe-table>
    </div>
</template>

<script>
export default {
    name: "PermissionTree",
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        onCheckboxChange(checked, data) {
            if (checked) {
                this.doCheck(data)
            } else {
                this.cancelCheck(data)
            }
        },
        // 选中
        doCheck(data) {
            // 同时选中全部子节点
            (data.children || []).treeMap(item => {
                item.hasPerm = true
            }, 'children')
            // 同时选中父级链条
            this.checkParent(data)
        },
        // 取消
        cancelCheck(data) {
            // 同时取消所有子节点
            (data.children || []).treeMap(item => {
                item.hasPerm = false
            }, 'children')
        },
        // 选中上级
        checkParent(data) {
            if (data.pid) {
                const parent = this.list.treeFind(item => item.id === data.pid, 'children');
                if (parent) {
                    parent.hasPerm = true;
                    if (parent.pid) {
                        this.checkParent(parent);
                    }
                }
            }
        },
        // 数据权限修改
        dataScopeChange(v, row) {
            if (row.children) {
                row.children.map(item => {
                    item.dataScopeType = v;
                })
            }
        },
        getSelectStatus(row) {
            let status = "";
            let okCount = 0;
            let noCount = 0;
            [row].treeMap(item => {
                if (item.hasPerm) {
                    okCount += 1;
                }
                if (!item.hasPerm) {
                    noCount += 1;
                }
                return item
            })
            if (okCount > 0 && noCount > 0) {
                status = "half"
            }
            if (okCount > 0 && noCount === 0) {
                status = "all"
            }
            return status
        }
    }
}
</script>

<style lang="scss">
.PermissionTree {
    .custom-node {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .tag {
            border-radius: 4px;
            font-size: 14px;
            margin: 0 4px;
        }

        .directory {
            color: var(--el-color-primary);
        }

        .page {
            color: var(--el-color-success);
        }

        .perm {
            color: var(--el-color-warning);
        }

        .icon-placeholder {
            margin-right: 4px;
        }
    }

}

.radio-label {
    font-size: 12px;
    font-weight: normal;
}
</style>
